<template>
	<!-- 头像部分 -->
	<view class="logo avatar">
		<image :src="userInfo.avatar ? userInfo.avatar :'/static/logo.png'"></image>
	</view>
	<!-- 个人信息部分 -->
	<view class="person">
		<view class="person-name">{{userInfo.userName}}</view>
		<view class="person-info">{{userInfo.remark}}</view>
		<view class="person-nation">
			<text>1996-09-09</text>
			<!-- 日期 -->
			<text>China</text>
			<!-- 国籍 -->
		</view>
	</view>
</template>

<script setup>
	import useUserStore from '@/store/user';

	import {
		ref
	} from 'vue';
	import { getProfile } from '@/api/user.js';

	const userInfo = ref({})
	const getInfo=()=>{
		getProfile().then((res)=>{
			userInfo.value=res.user
		})
	}
	getInfo()
</script>

<style lang="scss" scoped>
	@import "../profile.scss";
	.logo {
		width: 184rpx;
		height: 184rpx;
		position: absolute;
		left: 95rpx;
		top: -92rpx;
	}
	
	.avatar {
		border-radius: 50%;
		overflow: hidden;
	
		image {
			width: 184rpx;
			height: 184rpx;
		}
	
		&-text {
			position: absolute;
			width: 100%;
			bottom: 0;
			height: 40%;
			background-color: rgba(0, 0, 0, 0.5);
			color: #ffffff;
			font-size: 24rpx;
			padding: 10rpx 0;
			text-align: center;
			pointer-events: none;
			transition: all 0.25s;
			opacity: 1;
			font-family: PINGFANG-REGULAR;
			&.hasAvatar {
				height: 0;
				opacity: 0;
			}
		}
	}
</style>